<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .mapcontain {
        width: 100%;
        height: 100%;
    }

    #allmap {
        height: 100%;
        width: 100%;
    }

    #result {
        position: fixed;
        top: 10px;
        left: 20px;
        width: 300px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        border-radius: 7px;
        z-index: 99;
    }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=JxrDPsHM3UmoV2CkCqCYXPXixLHZBTkd"></script>
</head>
<body style="margin: none">
<div class="mapcontain">
    <div id="allmap"></div>
</div>
</body>
</html>
<script type="text/javascript">
    let BMapGL = window.BMap;
    var map = new BMapGL.Map('allmap');
    var point = new BMapGL.Point(116.51397, 39.73517);
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom(true);

    var driving = new BMapGL.DrivingRouteLine(map, {
        renderOptions: {
            map: map,
            autoViewport: true,
            enableDragging: true,
        }
    })
    var driving2 = new BMapGL.DrivingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true,
        }
    })

    var start = new BMapGL.Point(116.236532, 39.904113661);
    var start2 = new BMapGL.Point(116.310791, 40.003419);
    var end = new BMapGL.Point(116.545486, 40.006040);
    var end2 = new BMapGL.Point(116.486419, 39.877282);
    var way2 = new BMapGL.Point(116.36315661025989, 39.904113661);
    var way1 = new BMapGL.Point(116.49257333444989, 39.87920464090217);
    var way = '39.87920464090217,116.49257333444989|39.87806279099342,116.49218746174857'

    driving.search(start, end, {
        waypoints: [way2]
    });
    driving2.search(start2, end2, {});
</script>